<template>
	<div class="words-item-list yuwenPinyiWriteWords">
		<div class="words-item" v-for="(item, idx) in dataList" :key="idx">
			<div v-for="(word, index) in item.group" :key="index" class="word" :class="{'target': item.index === index}">
				<Words :text="word" :size="8" :border-draw="false" />
			</div>
			<div class="words-inner">
			<text class="margin-left-16">(</text>
				<div class="pinyi-list">
					<text v-for="(p, i) in item.pinyi" :key="i" class="pinyi" :class="[{'active': i === item.activeIndex}]">{{ p }}</text>
				</div>
				)
			</div>
		</div>
	</div> 
</template>

<script setup>
import { onMounted, ref } from "vue"
import Words from "@/components/words/index.vue"
import Props from "../props.js"
const props = defineProps(Props)
const dataList = ref([])
const emit = defineEmits(['answer'])
const value = {}
const change = (item, idx, i) => {
	if(!props.isStart) { return }
	item.activeIndex = i
	value[idx] = i
	emit('answer', value)
}
const init = () => {
	if(props.showInput) {
		dataList.value = props.data
	}else{
		const data = props.data
		const keys = Object.keys(props.result)
		data.forEach((item, index) => {
			item.activeIndex = keys.includes(String(index)) ? props.result[index] : ''
		})
		dataList.value = data
	}
}
onMounted(() => {
	init()
})
</script>

<style lang="scss" scoped>
@import "@/styles/var.scss";
.words-item-list {
	display: flex;
	flex-wrap: wrap;
	.words-item {
		margin-bottom: 2.4rem;
		width: 100%;
		font-size: 1.4rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.word { 
		position: relative;
		&.target::after {
			position: absolute;
			content: "";
			margin: 1re, auto 0;
			width: 0.4rem;
			height: 0.4rem;
			border-radius: 20px;
			background-color: #000;
			left: 50%;
			margin-left: -0.2rem;
			bottom: -0.6rem;
		}
	}
	.pinyi {
		font-size: 1.6rem;
		+ .pinyi {
			margin-left: 2rem;
		}
	}
}
.pinyi-list {
	margin: 0 0.8rem;
	text {
		position: relative;
		font-family: "pingyi";
		color: $gray-ligh-3;
	}
	.active {
		color: $gray-ligh-1;
		&::after {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: -10px;
			border-bottom: 2px solid #000;
		}
	}
}
.words-inner {
	display: flex;
	align-items: center;
	position: relative;
	top: -0.6rem;
}
</style>